<template>
  <div class="class_notice_item" v-for="(item) in noticeList">
    <div class="class_notice_item_content">
      <p>{{ item.title }}</p>
      <div>{{ item.content }}</div>
    </div>
    <!--todo:需完成班级公告删除-->
    <div v-if="admin" class="del_notice">
      <el-button @click="emit('delete',item.id)" type="danger" style="width: 100%;height: 100%">
        <el-icon size="32">
          <Delete/>
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ClassNotice} from "../../types/mytypes";
const emit = defineEmits(["delete"])

const props = defineProps<{
  noticeList: ClassNotice[],
  admin: boolean
}>()

</script>

<style scoped lang="scss">
.class_notice_item {
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 4px;
  height: auto;
  min-height: 6em;
  margin-bottom: 0.4em;
  padding: 0 0 0 1em;
  width: 100%;
  box-sizing: border-box;

  .class_notice_item_content {
    width: 100%;
  }

  .del_notice {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    //border-left: 4px #eee solid;
    padding: 1em;
  }
}
</style>